<template>
	<view class="all">
		<view class="index_top">
			<view class="box3">
				<image src="../../static/index/index_top.png" mode=""></image>
				<view v-show="lists.presence==0">
					离线
				</view>
				<view v-show="lists.presence==1">
					离线
				</view>
			</view>
		</view>
		<view class="index_two" @click="joininfo()">
			<view class="flex">
				<image class="left3" :src="'https://admin.lykangshu.top'+lists.store_photo" mode=""></image>
				<view class="center3">
					{{lists.store_name}}
				</view>
			</view>
			<image class="right3" src="../../static/ming/back.png" mode=""></image>
		</view>
		<view class="center">
			<view class="box">
				<view class="one">
					{{lists.order_count}}
				</view>
				<view class="two">
					本期接单数
				</view>
			</view>
			<image class="img2" src="../../static/index/直线 42@2x.png" mode=""></image>
			<view class="box">
				<view class="one">
					￥{{lists.achievement}}
				</view>
				<view class="two">
					本期业绩
				</view>
			</view>
			<image class="img2" src="../../static/index/直线 42@2x.png" mode=""></image>
			<view class="box">
				<view class="one">
					{{lists.good_rate}}%
				</view>
				<view class="two">
					好评率
				</view>
			</view>
		</view>

		<view class="center2">
			<view class="box">
				<view class="one">
					{{lists.receiving_orders}}
				</view>
				<view class="two">
					今日接单数
				</view>
			</view>
			<image class="img2" src="../../static/index/直线 42@2x.png" mode=""></image>
			<view class="box">
				<view class="one">
					￥{{lists.revenue}}
				</view>
				<view class="two">
					今日营收额
				</view>
			</view>
			<image class="img2" src="../../static/index/直线 42@2x.png" mode=""></image>
			<view class="box">
				<view class="one">
					￥{{lists.divided}}
				</view>
				<view class="two">
					今日分成数据
				</view>
			</view>
		</view>
		<view class="lastimg">
			<view class="list" v-for="(item , index) in list" :key="index" @click="join(item.url2)">
				<image class="img3" :src="item.url" mode=""></image>
				<view>
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="index_bot">
			<view class="index_list flex_sp" v-for="(item , index) in info" :key="index" @click="every(item.url)">
				<view>
					{{item.name}}
				</view>
				<image style="width: 10px;height: 10px;" src="../../static/ming/back.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: "数据统计",
					url: "../../static/index/分组 21@2x.png",
					url2: "/pages/index/statistics/statistics"
				}, {
					name: "资金明细",
					url: "../../static/index/矩形 115@2x.png",
					url2: "/pages/index/money/money"
				}, {
					name: "分成明细",
					url: "../../static/index/分组 8@2x.png",
					url2: "/pages/index/divide/divide"
				}, {
					name: "差评申诉",
					url: "../../static/index/矩形 116@2x.png",
					url2: "/pages/mine/feek/feek"
				}],
				title: '选择状态',
				info: [{
						name: "店内设施环境照",
						url: ""
					},
					{
						name: "分享二维码",
						url: '/pages/mine/friends/friends'
					}, {
						name: "工作人员照",
						url: "/pages/mine/lifephoto/lifephoto"
					},
					{
						name: "银行卡管理",
						url: '/pages/mine/bank/bank'
					}, {
						name: "设置",
						url: '/pages/mine/setup/setup'
					}
				],
				lists: {},
			}
		},
		onLoad() {
			this.getindex()
		},
		methods: {
			//底部跳转
			every(i){
				uni.navigateTo({
					url:i
				})
			},
			joininfo() {
				uni.navigateTo({
					url: '../mine/info/info'
				})
			},
			async getindex() {
				const res = await this.$api('/business/index/index', 'post').then((res) => {
					console.log(res.data.data);
					if (res.data.code == 1) {
						this.lists = res.data.data
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//4个图
			join(i) {
				uni.navigateTo({
					url: i
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.all {
		padding: 15px;

		.index_bot {
			margin: 10px 0;

			.index_list {
				// display: flex;
				// align-items: center;
				// justify-content: space-between;
				font-size: 14px;
				font-weight: bold;
				color: #333333;
				padding: 10px;
				border-bottom: 1px solid #eeeeee;
			}
		}

		.index_two {
			margin: 10px 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left3 {
				width: 80px;
				height: 80px;
			}

			.center3 {
				margin-left: 10px;
				font-size: 16px;
				font-weight: bold;
				color: #333333;
			}

			.right3 {
				width: 10px;
				height: 10px;
			}
		}

		.index_top {
			width: 100%;

			.box3 {
				margin: 0 auto;
				width: 20%;
				padding: 5px 0;
				background: #FDAE47;
				border-radius: 26px;
				display: flex;
				align-items: center;
				font-size: 11px;
				font-weight: bold;
				color: #FFFFFF;

				image {
					width: 18px;
					height: 18px;
					margin: 0 5px;
				}
			}
		}

		.center {
			display: flex;
			align-items: center;
			justify-content: center;
			background: #FB774B;
			border-radius: 10px;
			padding: 15px 0;
			margin: 10px 0;

			.img2 {
				width: 2px;
				height: 33px;
				margin: 0 5px;
			}

			.box {
				flex: 1;
				text-align: center;

				.one {
					font-size: 22px;
					font-weight: 900;
					color: #FFFFFF;
				}

				.two {
					font-size: 12px;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
		}

		.center2 {
			background: #FDAE47;
			opacity: 0.6;


			margin: 15px 0;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10px;
			padding: 15px 0;

			.img2 {
				width: 2px;
				height: 33px;
				margin: 0 5px;
			}

			.box {
				flex: 1;
				text-align: center;

				.one {
					font-size: 22px;
					font-weight: 900;
					color: #FFFFFF;
				}

				.two {
					font-size: 12px;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
		}

		.lastimg {
			display: flex;
			align-items: center;
			justify-content: center;

			.list {
				flex: 1;
				text-align: center;
				font-size: 12px;
				font-weight: 400;
				color: #333333;

				.img3 {
					margin: 0 auto;
					width: 40px;
					height: 40px;
				}
			}

		}
	}
</style>